<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #e4e4e4;
      }

      .scroll-view {
        flex: 1;
        overflow-y: auto;
      }

      .message {
        padding: 20px;
        display: flex;
      }
      .message__avatar {
        width: 80px;
        height: 80px;
      }

      .message__container {
        margin: 0 15px;
        flex: 1;
      }

      .message__name {
        font-size: 32px;
        line-height: 48px;
        color: #202020;
      }

      .message__msg {
        font-size: 24px;
        line-height: 36px;
        color: #707070;
      }

      .form {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: env(safe-area-inset-bottom, 0);
        width: 100%;
        height: 100px;
        background-color: #ccc;
      }

      .form .input {
        padding: 0 32px;
        width: 500px;
        height: 64px;
        border-radius: 32px;
        background-color: #ededed;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" class="page" v-cloak>
      <div ref="scrollViewRef" class="scroll-view">
        <div class="message" v-for="(item, index) in messages" :key="index">
          <div class="message__container">
            <div class="message__name">{{item.nickName}}</div>
            <div class="message__msg">{{item.msg}}</div>
          </div>
        </div>
      </div>

      <div class="form">
        <input
          class="input"
          placeholder="这是一个输入框"
          :disabled="!socket"
          @keyup.enter="handleSend"
        />
      </div>
    </div>

    <!-- 引入 Vue 类库 -->
    <script src="./vue.global.js"></script>

    <!-- 引入 socket.io 的 客户端类库 -->
    <script src="./socket.io.min.js"></script>

    <script>
      // 创建应用实例
      const app = Vue.createApp({
        data() {
          return {
            socket: null, // 当前 socket 实例

            messages: [
              // {
              //   nickName: "张三",
              //   msg: "Hello, 你好呀。我的天，你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。你真的好吗。",
              // },
            ],
          };
        },

        methods: {
          handleSend(event) {
            // 1. 获取输入框 value 值
            const value = event.target.value.trim();
            if (!value) return;

            this.socket.emit("message", value);
          },
        },

        mounted() {
          // 1. 获取nickName
          const nickName = window.prompt("请输入昵称");
          if (!nickName) return;

          // 2. 建立 socket 链接
          this.socket = io("ws://10.36.104.243:3000?nickName=" + nickName);

          // 3. 监听 服务端发来的事件
          //    3.1 welcome
          this.socket.on("welcome", (payload) => {
            // 组装 message 追加到 messages 中，让页面更新
            this.messages.push({
              nickName: "管理员",
              msg: payload,
            });

            this.$nextTick(() => {
              this.$refs.scrollViewRef.scrollTop =
                this.$refs.scrollViewRef.scrollHeight;
            });
          });

          //    3.2 message
          this.socket.on("message", (payload) => {
            console.log("payload", payload);

            this.messages.push({
              nickName: payload.nickName,
              msg: payload.msg,
            });

            this.$nextTick(() => {
              this.$refs.scrollViewRef.scrollTop =
                this.$refs.scrollViewRef.scrollHeight;
            });
          });
        },
      });

      // 挂载应用实例
      app.mount("#app");
    </script>
  </body>
</html>
